<!--
 * @Description: 配置表头预渲染单元格
 * @version:
 * @Author: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="icr-preRenderTitle" :class="{ 'inline-block': inlineBlock }">
    <template v-if="column">
      <div
        class="titleText"
        :class="[{ 'ws-nowrap': wsNoWrap }, { 'ws-wrap': !wsNoWrap }]"
        :style="{
          minWidth: column._minWidth ? column._minWidth + 'px' : 'unset',
          width: column.titieWidth ? column.titieWidth + 'px' : 'auto'
        }"
        :data-id="column._uuid"
        :data-width="column.titieWidth"
      >
        <div
          v-for="(item, index) in column.title.split(';')"
          :key="index"
          style="width: 100%"
        >
          {{ item }}
        </div>
        <div style="width: 100%">{{ column.propUnit }}</div>
      </div>
      <!-- 子项列表渲染 -->
      <div v-if="column.childList.length" class="block">
        <component
          :is="'IcrPreRenderTitle'"
          v-for="(item, idx) in column.childList"
          :key="idx"
          :column="item"
          :ws-no-wrap="wsNoWrap"
          inline-block
          :p-x="pX"
        />
      </div>
    </template>
    <span
      v-else
      class="titleText"
      :class="[{ 'ws-nowrap': wsNoWrap }, { 'ws-wrap': !wsNoWrap }]"
    >
      错误表头数据为空
    </span>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'IcrPreRenderTitle',
  props: {
    column: {
      type: Object,
      default: null
    },
    wsNoWrap: {
      type: Boolean,
      default: false
    },
    inlineBlock: {
      type: Boolean,
      default: false
    },
    pX: {
      type: Number,
      default: 4
    }
  }
})
</script>

<style lang="scss" scoped>
.icr-preRenderTitle {
  box-sizing: border-box;
  display: block;
  white-space: normal;
  text-align: left;
  // line-height: 1.5;
}

.titleText {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  line-height: 1.5;
  // font-size: 14px;

  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  font-size: 12px;
  // font-weight: bold;
}

.ws-nowrap {
  white-space: nowrap;
}

.ws-wrap {
  white-space: normal;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.px {
  &-4 {
    padding-left: 4px;
    padding-right: 4px;
  }
}
</style>
